<template>
  <el-menu unique-opened router active-text-color="#409eff" :default-active="route.name" border-right="#545c64" background-color="#324057" class="el-menu-vertical-demo" text-color="#fff">
<!--  >:collapse="store.state.collapse"-->
    <template v-for="(item,index) in menuItems" :key="index">
      <!-- 一级菜单 -->
      <el-menu-item v-if="!item.children && item.meta.type==type" :index="item.name">
        <component class="menu-icon" :is="item.meta.icon"></component>
        <span>{{item.meta.title}}</span>
      </el-menu-item>
      <!-- 二级菜单 -->
      <el-sub-menu v-if="item.children && item.meta.type==type" :index="item.name">
        <template #title>
          <component class="menu-icon" :is="item.meta.icon"></component>
          <span>{{item.meta.title}}</span>
        </template>
        <el-menu-item v-for="(it,index) in item.children" :key="index" :index="it.name">
          <component class="menu-icon" :is="it.meta.icon"></component>
          <span>{{it.meta.title}}</span>
        </el-menu-item>
      </el-sub-menu>
    </template>
  </el-menu>

</template>

<script>
  import { useStore } from 'vuex'
  import {useRouter,useRoute} from 'vue-router'
  import {onMounted,ref} from "vue";
  export default {
    name:'Aside',
    setup(){
      const store=useStore()
      const router=useRouter()
      const route=useRoute()
      const type=ref('')
      let menuItems=router.options.routes.filter(item => item.name='index')[2].children

      onMounted(()=>{
        type.value=JSON.parse(sessionStorage.getItem("user")).type
      })

/*      const handleOpen = (key, keyPath) => {
        console.log(key, keyPath)
      }
      const handleClose = (key, keyPath) => {
        console.log(key, keyPath)
      }*/

      return{
        store,
        route,
        menuItems,
        type
      }
    }
  }
</script>
<style scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    min-height: 400px;
    /*flex-grow : 1;*/
  }
  .el-menu{
    height: 100%;
    width: 100%;
    border-right: #324057;
    overflow: hidden;
  }
  .menu-icon{
    height: 18px;
    width: 23px;
    padding-right: 5px;
    color: #909390;
  }
</style>
